<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #qrcode-container {
            margin-top: 20px;
        }
        #qrcode-container img {
            max-width: 300px;
            max-height: 300px;
        }
        #result {
            margin-top: 20px;
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
<h1>微信登录</h1>
<button id="login-btn">点击生成二维码并登录</button>
<div id="qrcode-container"></div>
<div id="result">
    <!-- 使用 Freemarker 条件判断 -->
    <#if data?? && data.userInfo?? && data.userInfo.nickname??>
        欢迎 ${data.userInfo.nickname}
    <#else>
        请扫描二维码登录
    </#if>
</div>

<script>
    let qrCodeGenerated = false; // 标记是否已生成二维码

    document.getElementById('login-btn').addEventListener('click', function () {
        if (qrCodeGenerated) {
            alert("二维码已生成，请扫描二维码！");
            return;
        }

        // 调用后端接口获取二维码
        fetch('/twxLogin')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.blob();
            })
            .then(blob => {
                // 将返回的二维码图片显示在页面上
                const img = document.createElement('img');
                img.src = URL.createObjectURL(blob);
                const qrcodeContainer = document.getElementById('qrcode-container');
                qrcodeContainer.innerHTML = ''; // 清空之前的二维码
                qrcodeContainer.appendChild(img);

                qrCodeGenerated = true; // 标记二维码已生成
            })
            .catch(error => {
                console.error('生成二维码失败:', error);
                alert('生成二维码失败，请稍后再试');
            });
    });

    // 定时轮询检查 /wxCallback 是否被触发
    function pollWxCallback() {
        fetch('/wxCallbackStatus') // 假设后端提供了一个接口来检查回调状态
            .then(response => response.json())
            .then(data => {
                if (data.userInfo && data.userInfo.nickname) {
                    // 显示用户名
                    const resultDiv = document.getElementById('result');
                    resultDiv.innerHTML = `欢迎 ${data.userInfo.nickname}`;
                    clearInterval(pollingInterval); // 停止轮询
                }
            })
            .catch(error => {
                console.error('检查回调状态失败:', error);
            });
    }

    let pollingInterval;

    document.getElementById('login-btn').addEventListener('click', function () {
        // 开始轮询检查 /wxCallback 是否被触发
        pollingInterval = setInterval(pollWxCallback, 3000); // 每3秒检查一次
    });
</script>
</body>
</html>